import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd';
import { Link } from 'umi';
import React from 'react';

import StandardFormRow from '@/components/StandardFormRow';
import TagSelect from '@/components/TagSelect';
import './index.less';
import FormCard from '@/components/FormCard';

const FormItem = Form.Item;
const FormDesign: React.FC = () => {

  return (
    <Card className='top' bordered={false} style={{ backgroundColor: 'white' }}>
      <div>
        <div >
          <div className='title' style={{ display: 'flex', justifyContent: 'space-between' }}>
            <p><span style={{ fontWeight: 700 }}>市场模板</span> | 从众多行业模板中快速创建</p>
            <div>
              <span className='arco-input-wrapper arco-input-search' style={{ width: '220px' }}>
                <input className="arco-input arco-input-size-medium" type="text" placeholder="关键词搜索" />
                <span className="arco-input-suffix">
                  <span className='arco-icon-hover'>
                    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" className="arco-icon arco-icon-search" ><path d="M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485"></path></svg>
                  </span>
                </span>
              </span>

              <Link to='/form/formDesign/design'>
                <button style={{ marginLeft: '10px' }} className='arco-btn arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal' type='button'>
                  新建
                </button>
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div className='content'>
        <StandardFormRow title="分类" block style={{ paddingBottom: 11 }}>
          <FormItem name="category">
            <TagSelect defaultCheckAll={true}>
              <TagSelect.Option checked value="cat1">教育</TagSelect.Option>
              <TagSelect.Option value="cat2">互联网</TagSelect.Option>
              <TagSelect.Option value="cat3">职场</TagSelect.Option>
              <TagSelect.Option value="cat4">金融</TagSelect.Option>
              <TagSelect.Option value="cat5">医疗</TagSelect.Option>
              <TagSelect.Option value="cat6">生活</TagSelect.Option>
              <TagSelect.Option value="cat7">法律</TagSelect.Option>
              <TagSelect.Option value="cat8">工业</TagSelect.Option>
              <TagSelect.Option value="cat9">星座</TagSelect.Option>
              <TagSelect.Option value="cat10">文化</TagSelect.Option>
              <TagSelect.Option value="cat11">影视</TagSelect.Option>
            </TagSelect>
          </FormItem>

          <FormCard />
        </StandardFormRow>
      </div>
    </Card>)
}

export default FormDesign
